import CommonInputNumber from '@/pages/OrderModule/common/components/CommonInputNumber';
import CommonTable from '@/pages/OrderModule/common/components/CommonTable/components/CommonTable';
import CommonText from '@/pages/OrderModule/common/components/CommonText/CommonText';
import { Image, message } from 'antd';
import moment from 'moment';
import { useEffect, useState, useRef } from 'react';
import { TableType } from './helpers/constant';
import { getGoodsSkuPage } from './service';
const GoodsShowTable = ({ type, isSingle, filterParams, getTableRows, setSelectedRows, onInputNumberChange, commonChange }) => {
    const [dataSource, setDataSource] = useState([]);
    const [rowNumber, setRowNumber] = useState({});
    const rowKey = 'id';
    const tableColumns = [
        { title: '序号', dataIndex: 'index', width: 54, render: (t, r, i) => i + 1 },
        {
            title: '图片',
            dataIndex: 'image',
            render(text) {
                return <Image width={32} src={text} style={{ borderRadius: 6 }}/>;
            },
            width: 56,
        },
        { title: '商品名称', dataIndex: 'skuName', ellipsis: true, width: 182 },
        { title: '款式编码', dataIndex: 'spuCode', width: 90 },
        { title: '商品编码', dataIndex: 'skuCode', width: 90 },
        { title: '商品简称', dataIndex: 'skuAbbreviation' },
        { title: '颜色规格', dataIndex: 'colorSpecifications', width: 124 },
        { title: '规格', dataIndex: 'colorSpecifications' },
        { title: '零售价', dataIndex: 'retailPrice', width: 74 },
        { title: '采购价', dataIndex: 'purchasePrice', width: 74 },
        { title: '会员价', dataIndex: 'memberPrice', width: 74 },
        { title: '成本价', dataIndex: 'costPrice', width: 74 },
        { title: '市场价|吊牌价', dataIndex: 'tagPrice', width: 114 },
        { title: '可用库存', dataIndex: 'availableInventory', width: 82 },
        { title: '虚拟库存', dataIndex: 'virtualInventory', width: 82 },
        { title: '重量', dataIndex: 'weight', width: 64 },
        {
            title: '状态',
            dataIndex: 'status',
            render(value) {
                return <CommonText text={value ? '启用' : '禁用'} type={value ? 'success' : 'error'}/>;
            },
            width: 54,
        },
        { title: '商品备注', dataIndex: 'note' },
        { title: '创建时间', dataIndex: 'createTime', width: 134, render: (text) => (!isNaN(Number(text)) ? <div>{moment(Number(text)).format('YYYY-MM-DD HH:mm:ss')}</div> : text) },
    ];
    const [selectedRowKeys, setSelectedRowKeys] = useState(setSelectedRows(dataSource, rowKey));
    const cacheSelectedRows = useRef([])
    
    useEffect(() => {
        const oldSelectedRowKeys = cacheSelectedRows.current.map(item => item[rowKey])
        setSelectedRowKeys([...oldSelectedRowKeys, ...setSelectedRows(dataSource, rowKey)]);
        commonChange('dataSource', dataSource);
        setRowNumber(dataSource.map((item) => item.field_number))
    }, [dataSource]);
    const onSelectChange = (newSelectedRowKeys) => {
        if(isSingle && newSelectedRowKeys?.length > 1){
            return message.info('只能勾选一个商品')
        }
        commonChange('selectedRowKeys', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
        const tmp = dataSource.filter((item) => newSelectedRowKeys.includes(item[rowKey]))
        cacheSelectedRows.current = cacheSelectedRows.current.concat(tmp)
        getTableRows(cacheSelectedRows.current, rowKey);
    };
    if (type === TableType.HasNumberInput) {
        // 在 颜色规格 列后面 增加数字列
        tableColumns.splice(7, 0, {
            title: '数量',
            dataIndex: 'input_number',
            width: 124,
            render(value, record, index) {
                const key = record[rowKey];
                return (<CommonInputNumber placeholder="请输入数量" value={rowNumber[key]} onChange={(value) => {
                        setRowNumber((pre) => {
                            const newData = { ...pre, [key]: value };
                            onInputNumberChange?.(newData);
                            return newData;
                        });
                    }}/>);
            },
        });
    }
    let renderCell = undefined;
    if (type === TableType.AccordingStyle) {
        renderCell = (checked, record, index, originNode) => {
            if (index > 0 && dataSource[index - 1].field4 === record.field4) {
                return null;
            }
            return originNode;
        };
    }
    return (<CommonTable rowKey={rowKey} rowSelection={{
            type: 'checkbox',
            selectedRowKeys,
            onChange: onSelectChange,
            renderCell,
        }} form={filterParams} dataFieldKey="data.records" totalFieldKey="data.total" columns={tableColumns} ajaxFn={getGoodsSkuPage} onValueChange={(data) => {
            setDataSource(data);
        }} formatForm={(params) => {
            const _params = Object.assign({}, params)
            _params.pageNum = params.page
            delete _params['page']

            return _params
        }} scroll={{ x: 1900, y: 400 }}/>);
};
export default GoodsShowTable;
